<template>
    <div style="width: 600px;" class="login-form">
        <div class="login-container">
            <h2 class="login-title">洗衣预约系统</h2>
            <bk-form :label-width="200" :model="formData" :rules="rules" ref="validateForm1">
                <bk-form-item label="用户名:" :property="'username'" :required="true">
                    <bk-input v-model="formData.username" placeholder="请输入3到10个以内的字符"></bk-input>
                </bk-form-item>
                <bk-form-item label="密码:" :property="'password'" :required="true">
                    <bk-input v-model="formData.password" placeholder="请输入6到15个以内的字符" type="password"></bk-input>
                </bk-form-item>
                <bk-form-item label="身份" :required="true" :property="'role'">
                    <bk-radio-group v-model="formData.role">
                        <bk-radio :value="'商家'">商家</bk-radio>
                        <bk-radio :value="'客户'">客户</bk-radio>
                    </bk-radio-group>
                </bk-form-item>
                <bk-form-item>
                    <bk-button style="margin-right: 3px;" theme="primary" title="登录" @click.stop.prevent="checkData" :loading="isChecking">登录</bk-button>
                    <bk-button style="margin-right: 3px;" theme="primary" title="客户注册" @click="goregister">客户注册</bk-button>
                </bk-form-item>
            </bk-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'monitor-navigation',
        data () {
            return {
                formData: {
                    username: '',
                    password: '',
                    role: ''
                },
                rules: {
                    username: [
                        {
                            required: true,
                            message: '必填项',
                            trigger: 'blur'
                        },
                        {
                            min: 1,
                            message: '不能小于1个字',
                            trigger: 'blur'
                        },
                        {
                            max: 10,
                            message: '不能多于10个字符',
                            trigger: 'blur'
                        }
                    ],
                    password: [
                        {
                            required: true,
                            message: '必填项',
                            trigger: 'blur'
                        },
                        {
                            min: 6,
                            message: '不能小于6个字',
                            trigger: 'blur'
                        },
                        {
                            max: 10,
                            message: '不能多于15个字符',
                            trigger: 'blur'
                        }
                    ],
                    role: [
                        {
                            required: true,
                            message: '请选择身份',
                            trigger: 'blur'
                        }
                    ]
                }
            }
        },
        methods: {
            /**
             * 获取页面数据
             *
             * @return {Promise} promise 对象
             */
            checkData () {
                this.$refs.validateForm1.validate().then(validator => {
                    this.login()
                }, validator => {
                    // 显示第一个出错位置
                    // alert(validator.content)
                })
            },
            goregister () {
                this.$router.push({
                    name: 'register'
                })
            },
            login () {
                const qs = require('qs')
                this.axios({
                    url: '/login/',
                    method: 'post',
                    responseType: 'json',
                    data: qs.stringify({
                        'username': this.formData.username,
                        'password': this.formData.password,
                        'role': this.formData.role
                    })
                }).then(res => {
                    if (res.data.result) {
                        if (this.formData.role === '商家') {
                            sessionStorage.setItem('user', JSON.stringify(this.formData.username))
                            sessionStorage.setItem('usertype', JSON.stringify('merchant'))
                            this.$router.push({
                                name: 'mehome'
                            })
                        }
                        if (this.formData.role === '客户') {
                            sessionStorage.setItem('user', JSON.stringify(this.formData.username))
                            sessionStorage.setItem('usertype', JSON.stringify('customer'))
                            this.$router.push({
                                name: 'cuhome',
                                data: {
                                    username: this.formData.username
                                }
                            })
                        }
                    } else {
                        const config = {
                            theme: 'error',
                            message: '账号或密码错误'
                        }
                        this.$bkMessage(config)
                    }
                })
            }
        }
    }
</script>

<style>
.box {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.login-form {
    width: 350px;
    margin: 160px auto; /* 上下间距160px，左右自动居中*/
    background-color: rgba(124, 180, 233, 0.8); /* 透明背景色 */
    padding: 30px;
    border-radius: 20px; /* 圆角 */
}
.login-title {
    color: #303133;
    text-align: center;
}
</style>
